<template>
  <view class="index-page">
    <view class="tab-content">
      <u-tabs
        :list="state.tabList"
        bg-color="transparent"
        :is-scroll="true"
        active-color="#fffeff"
        inactive-color="#909a9d"
        font-size="40"
        v-model="state.tabCurrent"
        @change="change"
      />
    </view>
    <u-dropdown
      v-if="state.tabCurrent === 1"
      title-size="30"
      active-color="#5145d3"
      inactive-color="#fff"
    >
      <u-dropdown-item
        ref="dropdown"
        v-model="state.value1"
        title="选择藏品"
        :options="state.options1"
      >
        <scroll-view
          class="scrool"
          :scroll-y="true"
          :style="{ height: '1000rpx', backgroundColor: '#fff' }"
        >
          <view class="slot-content">
            <view
              :class="
                state.collection_id === item.id
                  ? 'u-content active'
                  : 'u-content'
              "
              v-for="(item, index) in state.options1"
              :key="index"
              @click="setCollectionName(item.id)"
              >{{ item.name }}</view
            >
          </view>
        </scroll-view>
        <view style="height: 300rpx" @click="close"></view>
      </u-dropdown-item>
      <u-dropdown-item ref="dropdown" v-model="state.value1" title="选择作者">
        <scroll-view
          :scroll-y="true"
          :style="{ height: '1000rpx', backgroundColor: '#fff' }"
        >
          <view class="slot-content">
            <view
              :class="
                state.author_id === item.id ? 'u-content active' : 'u-content'
              "
              v-for="(item, index) in state.options2"
              :key="index"
              @click="setAuthorName(item.id)"
              >{{ item.name }}</view
            >
          </view>
        </scroll-view>
        <view style="height: 300rpx" @click="close"></view>
      </u-dropdown-item>
    </u-dropdown>
    <scroll-view
      class="scrool"
      :style="{ height: state.tabCurrent === 0 ? '1370rpx' : '675px' }"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view class="wrap">
        <collections-card
          v-for="(item, index) in state.list"
          :key="index"
          @click="collectionsClick(item)"
          :type="String(state.tabCurrent === 0 ? 0 : 2)"
          :obj="item"
        />
      </view>
      <u-loadmore
        :status="state.status"
        icon-type="flower"
        margin-top="30"
        margin-bottom="30"
      />
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {
  getCollectionNameList,
  getAuthorNameList,
  consignmentList
} from '@/api/modules/circulationCenter'
import { getCollectionList } from '@/api/modules/homePage'
import CollectionsCard from './components/CollectionsCard.vue'
import { reactive, ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { default as useCountStore } from '@/store/modules/countStore'

// 获取自定义的store
const dropdown = ref()
const store = useCountStore()
const { currentRoute } = storeToRefs(store)
const state = reactive({
  value1: 1,
  options1: [] as any,
  options2: [] as any,
  tabList: [
    {
      name: '首发'
    },
    {
      name: '寄售'
    }
  ],
  tabCurrent: 0,
  status: 'loadmore',
  list: [] as any,
  page: 0,
  collection_id: '',
  author_id: ''
})
onMounted(() => {
  bottomOut()
  getCollectionNameListData()
})

//商品点击跳转
const collectionsClick = (item: string | number) => {
  // uni.navigateTo({
  //   url: '/pages/login/forget'
  // })
}
//tab change
const change = (index: number) => {
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  state.tabCurrent = index
  state.collection_id = ''
  state.author_id = ''
  bottomOut()
}

//获取藏品作者名称列表
const getCollectionNameListData = () => {
  getCollectionNameList().then((result) => {
    state.options1 = result.data
    getAuthorNameList().then((result2: any) => {
      state.options2 = result2.data
    })
  })
}

//触底加载数据
const bottomOut = () => {
  if (currentRoute.value !== 1) return
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  const promise =
    state.tabCurrent === 0
      ? getCollectionList({ page: state.page, page_size: 10 })
      : consignmentList({
          page: state.page,
          page_size: 10,
          sort_id: '1',
          collection_id: state.collection_id,
          author_id: state.author_id
        })
  promise.then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 5) state.status = 'nomore'
    else state.status = 'loading'
  })
}
//选择藏品
const setCollectionName = (id: string) => {
  state.collection_id = id
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  dropdown.value.parent.close()
  bottomOut()
}
const close = () => {
  dropdown.value.parent.close()
}
//选择作者
const setAuthorName = (id: string) => {
  state.author_id = id
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  dropdown.value.parent.close()
  bottomOut()
}
</script>

<style scoped lang="less">
.index-page {
  font-style : normal;
  text-align : center;
  padding-bottom : 60rpx;

  .slot-content {
    display : flex;
    flex-wrap : wrap;
    justify-content : space-between;

    .u-content {
      width : 40%;
      margin : 20rpx;
      padding : 20rpx;
      background-color : rgb(233 233 233);
      color : black;
      border-radius : 20rpx;
    }
    .active {
      background-image : linear-gradient(
      to right,
      rgb(126, 80, 215),
      rgb(33, 56, 205)
      );
      color : #FFFFFF;
    }
  }

  .wrap {
    display : flex;
    flex-wrap : wrap;
    justify-content : space-between;
    margin : 0 20rpx;
  }
}

</style>
